import LatestAvatarView from "@/app/[language]/components/LatestAvatarView"; import useGetLatestEnrolledAvatar from "@/app/[language]/query/useGetLatestEnrolledAvatar"; import { useTranslations } from "next-intl"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; import { getDatetime } from "taehui-ts/date"; export default function LatestEnrolledAvatarsView() { const t = useTranslations(); const { data: latestEnrolledAvatar, isFetched: isLatestEnrolledAvatarLoaded, } = useGetLatestEnrolledAvatar(); return ( <ListGroup> <ListGroupItem>{t("latestEnrolledAvatarsView")}</ListGroupItem> {isLatestEnrolledAvatarLoaded ? latestEnrolledAvatar.map(({ avatarID, avatarName, date }) => ( <ListGroupItem key={avatarID}> <LatestAvatarView avatarID={avatarID} avatarName={avatarName} date={date} /> </ListGroupItem> )) : [...Array(5).keys()].map((i) => ( <ListGroupItem key={i}> <LatestAvatarView avatarID="" avatarName="Loading..." date={getDatetime()} /> </ListGroupItem> ))} </ListGroup> ); }